<template>
	<div class="boxwrapper">
		<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
			<el-form-item label="客户跟进状态：">
				<el-input style="width: 280px;" v-model.trim="ruleForm.ourStateName" placeholder="请输入运营端/CRM客户跟进专题"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary"  @click="searchList" id="monitorEnter">查询</el-button>
				<el-button @click="resetfrom">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
			<el-table-column prop="ourStateName" label="运营端客户跟进状态" align="center"></el-table-column>
			<el-table-column prop="systemStateName" label="CRM客户跟进状态" align="center"></el-table-column>
		</el-table>
		<el-pagination
			background
			style="margin-top:15px"
			layout="total, sizes, prev, pager, next"
			:current-page.sync="ruleForm.pageNum"
			:page-sizes="[10, 20, 30, 40]"
			:page-size="ruleForm.pageSize"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:total="totalSize">
		</el-pagination>
	</div>
</template>
<script>
	import api from '@/api/apiPath'
	export default {
		title:'客户状态映射',
		data() {
			return {
				ruleForm:{
					ourStateName:undefined,
					pageNum: 1,
					pageSize: 10,
				},
				tableData:[],
				totalSize:0,
			}
		},
		methods:{
			resetfrom(){
				this.ruleForm.ourStateName = '';
				this.loadData()
			},
			searchList(){
				this.ruleForm.pageNum =1;
				this.loadData();
			},
			handleSizeChange(val) {
				this.ruleForm.pageSize = val;
				this.loadData();
			},
			handleCurrentChange(val) {
				this.ruleForm.pageNum = val;
				this.loadData();
			},
			loadData(){
				this.axios.post(api.MAPINSTATEMAPING,this.ruleForm).then(res => {
					if (res.data.code == 200) {
						console.log(res)
						this.tableData = res.data.data.rows
						this.totalSize = res.data.data.total
					}else{
						this.$message(res.data.msg)
					}
				})
			}
		},
		created(){
			this.loadData()
		},
		activated(){
			this.searchList()
		}
	}
	
</script>
<style lang="stylus" scoped>

</style>